@extends('layouts.buz.layout', ['header_active' => 'index'])

@section('assets')
    <script src="{{asset('js/buz/template-web.js')}}"></script>
    <script id="info" type="text/html">
        <tbody>
        <col width="15%" />
        <col width="35%" />
        <col width="15%" />
        <col width="35%" />
        <tr>
            <td>创建时间</td>
            <td>@{{created_at}}</td>
            <td>支付时间</td>
            <td>@{{updated_at ? updated_at : '-'}}</td>
        </tr>
        <tr>
            <td>商户订单号</td>
            <td>@{{merchant_no}}</td>
            <td>系统订单号</td>
            <td>@{{plat_no}}</td>
        </tr>
        <tr>
            <td>订单金额</td>
            <td>@{{order_amt}}</td>
            <td>订单状态</td>
            <td>@{{order_status == 1 ? '已支付':'未支付' }}</td>
        </tr>
        <tr>
            <td colspan="2">请求ip地址</td>
            <td colspan="2">@{{req_ip}}</td>
            {{--<td>应用ID</td>--}}
            {{--<td>@{{order_data['app_id']}}</td>--}}
        </tr>
        @{{if order_status}}
        <tr>
            <td>上次通知状态</td>
            <td>@{{notify.status ? '响应成功': '响应失败'}}</td>
            <td>通知次数</td>
            <td>@{{notify.notify_time}}</td>

        </tr>
        <tr>
            <td>上次通知时间</td>
            <td>@{{notify.updated_at}}</td>
            <td>上次响应内容</td>
            <td>@{{(notify.res_content && notify.res_content.length > 50) ? notify.res_content.substring(0, 50) + '...' : notify.res_content}}</td>
        </tr>
        <tr>
            <td>结算金额</td>
            <td>@{{order_settle}}</td>
            <td>结算周期</td>
            <td>@{{settle_day}}</td>
        </tr>
        <tr>
            <td>是否结算</td>
            <td>@{{is_settle ? '已结算':'未结算'}}</td>
            <td>结算时间</td>
            <td>@{{settled_at}}</td>
        </tr>
        @{{/if}}


        </tbody>
    </script>

    <script id="notify" type="text/html">
        <ul class="list-group">
            <li class="list-group-item">
                <h4 class="list-group-item-heading">
                    服务状态码：
                </h4>
                <p class="list-group-item-text word-wrap">
                    @{{res.http_code}}
                </p>
            </li>
            <li class="list-group-item">
                <h4 class="list-group-item-heading">
                    返回报文：
                </h4>
                <p class="list-group-item-text word-wrap">
                    @{{res.body.length > 50 ? res.body.substring(0, 50) + '...' : res.body}}
                </p>
            </li>

            <li class="list-group-item">
                <h4 class="list-group-item-heading">
                    目标地址：
                </h4>
                <p class="list-group-item-text word-wrap">
                    @{{rechargeOrderNotify.notify_url}}
                </p>
            </li>
            <li class="list-group-item">
                <h4 class="list-group-item-heading">
                    传输方式：
                </h4>
                <p class="list-group-item-text word-wrap">
                    POST
                </p>
            </li>
            <li class="list-group-item">
                <h4 class="list-group-item-heading">
                    传递参数：
                </h4>
                <p class="list-group-item-text word-wrap">
                    @{{ rechargeOrderNotify.notify_body }}
                </p>
            </li>

        </ul>
    </script>

@endsection()
@section('title')
    应用 - 订单列表
@endsection()

@section('full-content')
    <input type="hidden" id="app_id" value="{{$id}}">

    @include('layouts.buz.sidebar.app', ['active'=> 'payment'])

    <div class="yhy-member col-sm-9 col-sm-push-3 col-md-10 col-md-push-2 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    支付
                </h4>
            </div>
            <div class="panel-body">

                <div class="row y-mt60">
                    <div class="col-sm-8 col-md-8">
                        总提交金额 <span id="total_amt">0</span>
                        总成功金额 <span id="total_success_amt">0</span>
                        已结算金额 <span id="total_settle_amt">0</span>
                        待结算金额 <span id="total_settling_amt">0</span>
                    </div>
                </div>

                <div class="row y-mt60">
                    <div class="col-sm-12 col-md-12 lineH28">

                        <div class="col-sm-3 col-md-3">
                            <input  type="text" id="starttime" value="{{date('Y-m-d 00:00')}}" class="form_datetime form-control" style="width: 100%;">
                        </div>
                        <div class="col-sm-3 col-md-3 padd">
                            <input  type="text" id="endtime" value="{{date('Y-m-d 23:59')}}" class="form_datetime form-control" >
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <div class="form-group">
                                <label for="lastname" class="col-sm-5 col-md-5 padd control-label">支付状态</label>
                                <div class="col-sm-7 col-md-7 padd">
                                    <select class="form-control" id="orderStatus">
                                        <option value="99">全部</option>
                                        <option value="0">未完成</option>
                                        <option value="1">已完成</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 lineH28 padd y-mt10">

                        <div class="col-sm-3 col-md-3">
                            <div class="form-group">
                                <label for="lastname" class="col-sm-5 col-md-5 padd control-label" >通道类型</label>
                                <div class="col-sm-7 col-md-7 padd">
                                    <select class="form-control" id="chanleType">
                                        <option value="all">全部</option>
                                        <option value="weixin">微信扫码</option>
                                        <option value="alipay">支付宝扫码</option>
                                        <option value="qq">QQ扫码</option>
                                        <option value="bank">在线银行</option>
                                        <option value="weixin_wap">微信wap</option>
                                        <option value="alipay_wap">支付宝wap</option>
                                        <option value="qq_wap">QQ钱包WAP</option>
                                        <option value="bank_wap">银联在线</option>
                                        {{--<option value="weixin_sdk">微信SDK</option>--}}
                                        {{--<option value="alipay_sdk">支付宝SDK</option>--}}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <label for="lastname" class="col-sm-5 col-md-5 padd control-label" >商户订单号</label>
                            <div class="col-sm-7 col-md-7 padd">
                                <input class="form-control" type="text" id="orderNo" />
                            </div>

                        </div>
                        <div class="col-sm-2 col-md-2">
                            <button type="button" class="btn btn-primary" id="search" onclick="SearchData()">查询</button>
                        </div>
                    </div>

                </div>
                <div class="historyList">
                    <table class="table table-striped table-bordered" id="table">
                        {{--<thead>--}}
                        {{--<tr>--}}
                            {{--<th data-field="created_at">创建时间</th>--}}
                            {{--<th data-field="mch_no">商户订单号</th>--}}
                            {{--<th data-field="plat_no">平台订单号</th>--}}
                            {{--<th data-field="payment.name">支付方式</th>--}}
                            {{--<th data-field="order_status">支付状态</th>--}}
                            {{--<th data-field="order_amt">支付金额</th>--}}
                            {{--<th data-filed="updated_at">支付时间</th>--}}
                            {{--<th data-file="notify">通知</th>--}}
                        {{--</tr>--}}
                        {{--</thead>--}}
                        {{--<tbody>--}}
                        {{--<tr>--}}
                            {{--<td>2017-10-18 10:50:45</td>--}}
                            {{--<td>20141254587455</td>--}}
                            {{--<td>123564565455654565</td>--}}
                            {{--<td>支付宝SDK</td>--}}
                            {{--<td>支付成功</td>--}}
                            {{--<td>5.00</td>--}}
                            {{--<td>fd5fd54f-454df54d5f-dfdf4545-45445445454545</td>--}}
                            {{--<td></td>--}}
                            {{--<td>2017-10-18 10:25:30</td>--}}
                            {{--<td>--}}
                                {{--<button type="button" class="btn btn-info" id="">补发通知</button>--}}
                                {{--<button type="button" class="btn btn-info" id="detailList">详情</button>--}}
                            {{--</td>--}}
                        {{--</tr>--}}
                        {{--</tbody>--}}
                        {{--<tbody>--}}
                        {{--<tr>--}}
                            {{--<td>本页小计</td>--}}
                            {{--<td colspan="9" class="red">33333</td>--}}
                        {{--</tr>--}}
                        {{--<tr>--}}
                            {{--<td>合计</td>--}}
                            {{--<td colspan="9" class="red">33333</td>--}}
                        {{--</tr>--}}
                        {{--</tbody>--}}
                    </table>

                </div>
            </div>
        </div>
    </div>
@endsection()

@section('dialog')
    <div class="modal fade in"  tabindex="-1" role="dialog" id="loginModel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h4 class="text-center">token超时，请重新登录</h4>
                </div>
                <div class="modal-footer text-xs-center">
                    <button type="button" class="btn btn-danger" id="replayLogin">重新登录</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade in"  tabindex="-1" role="dialog" id="rechargeModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">异步通知报告</h4>
                </div>
                <div class="modal-body" id="notifyDiv">


                </div>
                <div class="modal-footer text-xs-center">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">交易详情</h4>
                </div>
                <div class="modal-body textC fontSize1">
                    <table class="tab table-bordered" id="orderInfo">

                    </table>

                </div>
                <div class="modal-footer textC">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
@endsection()
@section('bottom_js')
    <script>
        $(function () {
            $("#replayLogin").click(function () {
                window.location.href="/login";
            })
        })

        //时间
        $(".form_datetime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",
            autoclose: true,
            todayBtn: true,
            minView: 1,
            inline: true
        });

        //查看详情
        function openDetail(id) {
            $('#detailInfo').modal('show');
            $.ajax({
                url: "/api/order/recharge/"+id,
                type: 'get',
                success:function(data){
                    if(filterAjaxData(data)){
                        var html = template('info', data.data);
                        document.getElementById('orderInfo').innerHTML = html;
//                    }else{
//                        showMsg(data.message);
                    }
                }


            });
        }
        //补发
        function recharge(id) {
            console.log(id);
            $.ajax({
                url: "/api/order/recharge/"+id+"/callback",
                type: 'post',
                success:function(data){
                    if(filterAjaxData(data)){
                        console.log(data);
                        $("#rechargeModal").modal("toggle");
                        var html = template('notify', data.data);
                        document.getElementById('notifyDiv').innerHTML = html;
//                    }else{
//                        showMsg(data.message);
                    }
                }


            });
        }

        $(function () {
            $("#starttime").datetimepicker({
                todayBtn : "linked",
                autoclose: true,
            }).on('changeDate',function(e){
                var startTime = e.date;
                $('#endtime').datetimepicker('setStartDate',startTime);
            });
            $("#endtime").datetimepicker({
                todayBtn : "linked",
                autoclose: true,
            }).on('changeDate',function(e){
                var endTime = e.date;
                $('#starttime').datetimepicker('setEndDate',endTime);
            });
            var $id = $("#app_id").val();
            $('#table').bootstrapTable({
                url: '/api/app/'+$id+'/recharge',
                queryParamsType: '',              //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                queryParams: queryParams,
                method: "get",
                pagination: true,
                pageNumber: 1,
                pageSize: 20,
                pageList: [10, 20, 50, 100],
                sidePagination: "server",         //分页方式：client客户端分页，server服务端分页（*）
                striped: true,                    //是否显示行间隔色
                cache: false,
                uniqueId: "id",               //每一行的唯一标识，一般为主键列
                height:700,
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                onLoadSuccess: function(data){  //加载成功时执行
                    //这个地方可以放每页的统计信息
                    console.log(data);

                },
                responseHandler: function(res) {
                    if(filterAjaxData(res)){
                        $("#total_amt").text(res.data.page_total_amt);
                        $("#total_success_amt").text(res.data.page_done_amt);
                        $("#total_settle_amt").text(res.data.page_done_settle);
                        $("#total_settling_amt").text(res.data.page_wait_settle);
                        return {
                            "total": res.data.total,//总页数
                            "rows": res.data.data   //数据
                        };
                    }else {
                        $("#loginModel").modal("toggle");
                    }

                },
                columns: [
//                    { checkbox: true },
                    { title: 'ID', field: 'id',visible: false, width: 50, align: "center", formatter: function (value, row, index) { return index + 1; } },
                    { title: '平台订单号', field: 'plat_no' },
                    { title: '商户订单号', field: 'merchant_no' },
                    { title: '订单金额', field: 'order_amt' },
                    { title: '订单状态', field: 'order_status',formatter: function (value, row, index) {
                            if(value==0){return "未支付"}else{return "已完成"}
                        }
                    },
                    { title: '结算金额', field: 'order_settle'},
                    { title: '创建时间', field: 'created_at' },
                    { title: '支付方式', field: 'payment.name' },
                    { title: '通知', field: 'notify',formatter: function (value, row, index) {
                        if(value){if(value.status==0){return "未成功"}else { return "已成功"}}else{return "-"}
                    }},
                    { title: '操作', formatter: function (value, row, index) {
                        var str="";
                        if (row.order_status == 1) {
                            str +='<button type="button" class="btn btn-info" onclick="recharge('+row.id+')" >补发通知</button>';
                        }
                        str +='<button type="button" class="btn btn-info detailList" onclick="openDetail('+row.id+')" >详情</button>';
                        return str;
                    } },
                ],
            });
        })
        //查询条件
        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                page: params.pageNumber,
                start_at: $("#starttime").val(),
                end_at: $("#endtime").val(),
                payment: $("#chanleType").val(),
                order_status:$("#orderStatus").val(),
                merchant_no:$("#orderNo").val(),
            };
        }
        function SearchData() {
            //判断时间
            var starttime=$("#starttime").val();
            var endtime=$("#endtime").val();
            if(starttime==null||endtime==null){
                //setTimeout(function () {
                showMsg("时间不能为空");
                //}, 230);
                return false;
            }
            //判断时间的大小
//            var ts1 = Date.parse(starttime.replace(/-/g, '/ '));
//            var ts2 = Date.parse(endtime.replace(/-/g, '/ '));
//            var ts = ts2-ts1;
//            console.log(ts);
//            if(ts<=0){
//                showMsg("截止时间小于开始时间，请重新选择！");
//                return false;
//            }
            $('#table').bootstrapTable('refreshOptions', { pageNumber: 1 });
        }

    </script>
@endsection()
